/**
 * 服饰列表项组件
 */

import { Text, View } from '@tarojs/components';
import { Del, Edit } from '@nutui/icons-react-taro';
import type { FC } from 'react';
import { Divider, Dialog, Checkbox } from '@nutui/nutui-react-taro';
import styles from './index.module.scss';
import { Media } from '@/components';
import type { PreselectDress } from '@/models/preselect';

interface DressItemProps {
  item: PreselectDress;
  onDelete?: (id: string) => void;
  onEdit?: (item: PreselectDress) => void;
  showOperate?: boolean;
  checked?: boolean;
  onChange?: (checked: boolean) => void;
  showChecked?: boolean;
  showDivider?: boolean;
  showRemark?: boolean;
}

const DressItem: FC<DressItemProps> = ({
  item,
  onDelete,
  onEdit,
  showOperate = true,
  checked,
  onChange,
  showChecked,
  showDivider,
  showRemark,
}) => {
  // 兼容嵌套结构和扁平结构
  const dress = (item as any).dress || item;
  const price = item.amount || dress.amount || 0;
  const dressName = dress.dressName || dress.name || '未知服饰';
  const dressNo = dress.dressNo || dress.id?.toString() || '';
  const sizeName = dress.sizeName || dress.size || '';
  const count = (item as any).count || 1;

  // 获取图片
  const imageUrl = 
    dress.pictureList?.[0] || 
    item.pictureList?.[0] || 
    item.fileUrlList?.[0] || 
    dress.fileUrlList?.[0] || 
    '';

  // 处理尺码文本
  const sizeText = sizeName
    ? String(sizeName).includes('码')
      ? String(sizeName)
      : `${sizeName}码`
    : '';

  return (
    <>
      <View className={styles.dress__item}>
        {showChecked && (
          <View className={styles.dress__item__checkbox}>
            <Checkbox checked={checked} onChange={onChange} />
          </View>
        )}

        <View className={styles.dress__item__info}>
          <Media src={imageUrl} width={48} height={48} />
          <View className={styles.dress__content}>
            <View className={styles.dress__info}>
              {/* 描述 */}
              <View className={styles.spaceBetween}>
                <View className={styles.dress__info__name}>
                  <Text className={styles.dress__info__name__text}>
                    {dressName}
                  </Text>
                </View>

                <Text className={styles.dress__info__price}>¥{price}</Text>
              </View>
              <View className={styles.spaceBetween}>
                <View className={styles.flexStart}>
                  {dressNo && (
                    <View className={styles.dress__info__dressNo}>
                      {dressNo}
                    </View>
                  )}

                  {/* 尺码 */}
                  {sizeText && (
                    <View className={styles.dress__info__dressNo}>
                      {sizeText}
                    </View>
                  )}
                </View>
                <View className={styles.dress__info__dressNo}>
                  x{count}
                </View>
              </View>
              {/* 备注显示 */}
              {showRemark && item.remark && (
                <View className={styles.remark}>
                  <Text className={styles.remark__text}>
                    备注: {item.remark}
                  </Text>
                </View>
              )}
            </View>
            {/* 操作 */}
            {showOperate ? (
              <View className={styles.dress__operation}>
                <Del
                  color="#FF3B30"
                  size={14}
                  onClick={() => {
                    onDelete?.(item.id.toString());
                  }}
                />
              </View>
            ) : null}
          </View>
        </View>
      </View>
      {showDivider ? <Divider /> : null}
    </>
  );
};

export default DressItem;
